import React, { FC, useEffect, memo, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { WhiteSpace } from 'antd-mobile';
import { useLocation, Location } from 'umi';
import Banner from './components/Banner';
import Info from './components/Info';
import Comments from './components/Comments';
import Footer from './components/Footer';
import {
  loadDetail,
  loadComments,
  changeReloadCommentsNum,
  restState,
  loadOrderDetail,
  loadAddOrder,
  loadDeleteOrder,
} from '@/stores/reducer/house';
import { RootState, IPageProps } from '@/interface';
import { useObserverHook } from '@/hooks';
import { LOAD_MORE_ID, PAGE_PARAMS } from '@/emuns';
import { HouseSkeletons } from '@/skeletons';
import { isEmpty } from 'project-libs';

import './index.less';

const House: FC = () => {
  const [page] = useState<IPageProps>(PAGE_PARAMS);
  const [showSkeletons, setShowSkeletons] = useState(true);
  const dispatch = useDispatch();
  const {
    detail,
    comments,
    showLoadMore,
    reloadCommentsNum,
    order,
  } = useSelector((state: RootState) => state.house);
  const { query }: Location = useLocation();
  useObserverHook(
    '#' + LOAD_MORE_ID,
    entries => {
      if (
        Array.isArray(comments) &&
        comments.length &&
        showLoadMore &&
        entries[0].isIntersecting
      ) {
        dispatch(changeReloadCommentsNum());
      }
    },
    [comments, showLoadMore, showSkeletons],
  );

  useEffect(() => {
    dispatch(
      loadOrderDetail({
        id: query?.id,
      }),
    );
  }, []);

  useEffect(() => {
    dispatch(
      loadDetail({
        id: query?.id,
      }),
    );
  }, []);

  useEffect(() => {
    dispatch(
      loadComments({
        ...page,
        pageNum: 1,
        houseId: query?.id,
      }),
    );
  }, [reloadCommentsNum]);

  useEffect(() => {
    return () => {
      dispatch(
        restState({
          detail: null,
          reloadCommentsNum: 0,
        }),
      );
    };
  }, []);

  useEffect(() => {
    if (!isEmpty(detail as any) && showSkeletons) {
      setShowSkeletons(false);
    }
  }, [detail]);

  const handleBtnClick = (id: string | number | undefined) => {
    if (!id) {
      dispatch(
        loadAddOrder({
          id: query?.id,
        }),
      );
    } else {
      dispatch(
        loadDeleteOrder({
          id: query?.id,
        }),
      );
    }
  };

  const currentBanner = detail && detail.banner ? detail.banner : [];
  const currentInfo = detail && detail.info ? detail.info : null;

  return (
    <div className="house-page-wrap">
      {showSkeletons ? (
        <HouseSkeletons />
      ) : (
        <>
          <Banner banner={currentBanner} />
          <WhiteSpace />
          <Info detail={currentInfo} order={order} btnClick={handleBtnClick} />
          <div className="comments-wrap">
            <Comments list={comments} showLoadMore={showLoadMore} />
          </div>
          <Footer />
        </>
      )}
    </div>
  );
};

export default memo(House);
